<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>

	<body>
		<div id="app">
			<h1> 生命周期函数</h1>
			<div id="app-7">
				<ol>
					<!--
					      现在我们为每个 todo-item 提供 todo 对象
					      todo 对象是变量，即其内容可以是动态的。
					      我们也需要为每个组件提供一个“key”，稍后再
					      作详细解释。
					    -->
					<todo-item 
						v-for="item in groceryList" 						
						v-bind:todo="item" 
						v-bind:key="item.id">											
					</todo-item>
				</ol>
				
				
			</div>
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script type="text/javascript">
		
		Vue.component('todo-item', {
			props: ['todo'],
			template: '<li> {{ todo.text }} <br/> {{todo.desc}}</li>'
		})

		var app7 = new Vue({
			el: '#app-7',
			data: {
				groceryList: [{
						id: 0,
						text: 'beforeCreate',
						desc: '',
					},
					{
						id: 1,
						text: 'create',
						desc: '',
					},
					{
						id: 2,
						text: 'updated',
						desc: '',
					}
				]
			},
			beforeCreate:function(){
				var desc = "beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用";
				//下面这句要注释掉，因为数据观测 (data observer) 和 event/watcher 事件配置之前调用了本方法，
				//这里读数据属性是会失败的
				//this.groceryList[0].desc=desc;
				console.log(desc);
			},
			created:function(){
				var desc = "created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。"
				this.groceryList[1].desc= desc;
				console.log("created");
			},
			beforeMount:function(){
				
			},
			mounted:function(){
				
			},
			beforeUpdate:function(){
				
			},
			updated:function(){
				var desc="由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。"
				var desc1 ="当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。";
				var desc3 = "如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated："
				//这里写的内容不会在页面上显示，因为整个页面重绘完成。
				//我们可以在这里做一些依赖于dom的操作。获取相关dom的节点等
				
			},
			activated:function(){
				
			},
			deactivated:function(){
				
			},
			beforeDestroy:function(){
				
			},
			destroyed:function(){
				
			},
			errorCaptured:function(err,componet,info){
				var desc="2.5.0 新增加的方法";
				var detail="当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。";
			}
			
			
		})
	</script>

</html>